<template>
   <div class="medicalService1">
       <img src="images/server_02.png" class="img-service">
       <div class="w">
          <div class="search-input">
             <div class="input-group">
              <input type="text" class="form-control" placeholder="查询医生的姓名">
              <span class="input-group-btn">
              <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
              </span>
             </div>
          </div>
          <div class="team">
              <h3>技术团队</h3>
              <div class="doctors">
                 <div class="borders">
                    <div class="bor-left">
                        <div @mouseenter="bor_show(1)" @mouseleave="bor_hide(1)" class="bor-item item1">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border1" v-if="bor1"></p>
                        </div>
                        <div @mouseenter="bor_show(2)" @mouseleave="bor_hide(2)" class="bor-item item2">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="assets/images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border2" v-if="bor2"></p>
                        </div>
                        <div @mouseenter="bor_show(3)" @mouseleave="bor_hide(3)" class="bor-item item3">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border3" v-if="bor3"></p>
                        </div>
                        <div @mouseenter="bor_show(4)" @mouseleave="bor_hide(4)" class="bor-item item4">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border4" v-if="bor4"></p>
                        </div>
                    </div>
                    <div class="bor-right">
                        <div @mouseenter="bor_show(5)" @mouseleave="bor_hide(5)" class="bor-item item5">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border5" v-if="bor5"></p>
                        </div>
                        <div @mouseenter="bor_show(6)" @mouseleave="bor_hide(6)" class="bor-item item6">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border6" v-if="bor6"></p>
                        </div>
                        <div @mouseenter="bor_show(7)" @mouseleave="bor_hide(7)" class="bor-item item7">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border7" v-if="bor7"></p>
                        </div>
                        <div @mouseenter="bor_show(8)" @mouseleave="bor_hide(8)" class="bor-item item8">
                         <div class="media">
                           <div class="media-left">
                             <a href="#">
                              <img class="media-object" src="images/server_05.png">
                             </a>
                           </div>
                           <div class="media-body">
                              <h4 class="doc-name">Frank Morris-Davies 医生 </h4>
                              <p class="doc-position">全科主任，上海商城门诊部主任</p>
                              <p class="doc-Introduction">弗兰克医生是一位具有门诊和住院部业工作经验的全科医生，有超过25年的从医经历，致力于为患者提供高标准的诊疗服务，并在运营多学科团队方面有多年的丰富经验...</p>
                              <p class="doc-lang">英文，意大利语，中文</p>
                              <span class="doc-button1">在线预约</span> 
                              <span class="doc-button2">阅读更多</span>
                           </div>
                         </div>
                         <p class="border8" v-if="bor8"></p>
                        </div>
                    </div>
                 </div>
              </div>
        </div>
       <div class="pag">
         <nav aria-label="Page navigation">
            <ul class="pagination">
             <li>
                 <a href="#" aria-label="Previous">
                 <span aria-hidden="true">&laquo;</span>
                 </a>
             </li>
             <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             <li><a href="#">4</a></li>
             <li><a href="#">5</a></li>
             <li><a href="#">...</a></li>
             <li><a href="#">11</a></li>
             <li>
                 <a href="#" aria-label="Next">
                 <span aria-hidden="true">&raquo;</span>
                 </a>
             </li>
            </ul>
         </nav>
       </div>
       </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            bor1:false,
            bor2:false,
            bor3:false,
            bor4:false,
            bor5:false,
            bor6:false,
            bor7:false,
            bor8:false,
        }
    },
    methods: {
        bor_show(flag){
           switch(flag)
           {
            case 1:
             this.bor1=true;
            break;
            case 2:
             this.bor2=true;
            break;
            case 3:
             this.bor3=true;
            break;
            case 4:
             this.bor4=true;
            break;
            case 5:
             this.bor5=true;
            break;
            case 6:
             this.bor6=true;
            break;
            case 7:
             this.bor7=true;
            break;
            case 8:
             this.bor8=true;
            break;
           }
        },
        bor_hide(flag){
            switch(flag)
           {
            case 1:
             this.bor1=false;
            break;
            case 2:
             this.bor2=false;
            break;
            case 3:
             this.bor3=false;
            break;
            case 4:
             this.bor4=false;
            break;
            case 5:
             this.bor5=false;
            break;
            case 6:
             this.bor6=false;
            break;
            case 7:
             this.bor7=false;
            break;
            case 8:
             this.bor8=false;
            break;
           }
        }
    }
}
</script>

<style scoped>
.doctors{
    margin-top:50px;
}
.borders{
    display:flex;
    justify-content:space-around;
}
.borders div{
    margin-left:10px;
}
.item1{
    position: relative;
}
.border1{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item2{
    position: relative;
}
.border2{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item3{
    position: relative;
}
.border3{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item4{
    position: relative;
}
.border4{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item5{
    position: relative;
}
.border5{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item6{
    position: relative;
}
.border6{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item7{
    position: relative;
}
.border7{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.item8{
    position: relative;
}
.border8{
    border:3px solid #3aa5c5;
    border-radius: 10px;
    height:258px;
    width:580px;
    position: absolute;
    top:-10px;
    left:0px;
}
.bor-item{
    cursor: pointer;
    margin-bottom:50px;
}
.doc-name{
    font-size:18px;
}
.doc-position{
   font-size:14px;
   color:#999999;
}
.doc-Introduction{
   font-size:14px;
}
.doc-lang{
   font-size:14px;
}
.doc-button1{
   display:inline-block;
   width:122px;
   height:40px;
   background: #3aa5c5;
   border-radius: 5px;
   color:#fff;
   text-align: center;
   line-height: 40px;
   cursor: pointer;
   margin-right:10px;
}
.doc-button2{
   display:inline-block;
   width:122px;
   height:40px;
   background:#3bb696;
   border-radius: 5px;
   color:#fff;
   text-align: center;
   line-height: 40px;
   cursor: pointer;
}
.pag{
    text-align: center;
}
.pagination li a{
    color: #000;
    padding:10px;
}
.pagination li a:hover{
   background: #3bb696;
}
</style>
